<template>
    <div class="login">
        <div class="login_bg">
            <div class="form">
                <div class="sys_title">
                    <img src="@/static/images/wap_logo.png" alt="" />
                    <span>后台管理系统</span>
                </div>
                <h2>账号密码登录</h2>
                <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" class="login_form">
                    <el-form-item prop="account" class="login_form_item">
                        <el-input
                            v-model="ruleForm.account"
                            placeholder="请输入用户名"
                            class="login_form_input"
                        />
                    </el-form-item>
                    <el-form-item prop="password" class="login_form_item">
                        <el-input
                            v-model="ruleForm.password"
                            placeholder="请输入密码"
                            class="login_form_input"
                        />
                    </el-form-item>
                    <el-form-item prop="msgCode" class="msgCode login_form_item">
                        <el-input
                            v-model="ruleForm.msgCode"
                            style="width: 54%"
                            placeholder="请输入验证码"
                            class="login_form_input login_form_msg_code"
                        />
                        <img src="@/static/images/msg_code.png" alt="" />
                    </el-form-item>
                    <el-form-item class="login_form_item">
                        <el-button
                            style="width: 100%"
                            type="primary"
                            class="login_form_input login_form_button"
                            @click="submitForm(ruleFormRef)"
                            >登录</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import type { FormInstance, FormRules } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
const formSize = ref("default");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
    account: "",
    password: "",
    msgCode: "",
});

const rules = reactive<FormRules>({
    account: [
        { required: true, message: "请输入用户名", trigger: "blur" },
        { min: 4, max: 10, message: "输入4-10位用户名", trigger: "blur" },
    ],
    password: [{ required: true, message: "请输入密码", trigger: "blur" }],
    msgCode: [
        { required: true, message: "请输入验证码", trigger: "blur" },
        { min: 4, max: 6, message: "验证码长度不正确", trigger: "blur" },
    ],
});

const submitForm = async (formEl: FormInstance | undefined) => {
    localStorage.token = "111";
    router.push({ path: "/" });
    if (!formEl) return;
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log("submit!");
        } else {
            console.log("error submit!", fields);
        }
    });
};

const resetForm = (formEl: FormInstance | undefined) => {
    if (!formEl) return;
    formEl.resetFields();
};
</script>
<style lang="scss" scoped>
.login {
    width: 100%;
    height: 100%;
    background: #dee8ff;
    .login_bg {
        width: 100%;
        height: 100%;
        background: url("@/static/images/login_bg_left.png") left bottom no-repeat,
            url("@/static/images/login_bg_right.png") right top no-repeat;
        display: flex;
        align-items: center;
        justify-content: center;
        .form {
            min-width: 360px;
            background: #fff;
            border-radius: 20px;
            padding: 24px 32px;
            .sys_title {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;
                img {
                    width: 70px;
                    height: auto;
                }
                span {
                    font-size: 26px;
                    background-image: -webkit-linear-gradient(bottom, #1890ff, #59abf8, #0369c9);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
            }
            h2 {
                color: #4d70ff;
                font-size: 17px;
                margin: 20px 0;
            }
            form {
                width: 100%;
                .login_form_item {
                    margin-bottom: 20px;
                    height: 40px;
                    .login_form_input {
                        height: 100%;
                    }

                    .login_form_button {
                        background-color: #4d70ff;
                        font-size: 14px;
                    }
                    .login_form_button:hover {
                        background-color: #3899f3;
                    }
                    img {
                        width: 42%;
                        height: 40px;
                        margin-left: 10px;
                    }
                    :deep(.el-form-item__content) {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                    }
                }
            }
        }
    }
    .msgCode {
        display: flex;
    }
}
</style>
